<template>
  <div class="app-container flex flex-col">
    <GroupsHeader v-model="activeName" :groups="groups" />

    <div class="flex-1 relative">
      <template v-if="activeName === 'group'">
        <RangeLine
          :key="key_01"
          :groups="groups"
          :grid="grid"
          :colors="fifthColor.toReversed()"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="9.1"
          :y-axis-axis-label-formatter="formatter"
        />
      </template>
      <template v-else-if="activeName === 'kill prev group accuracy'">
        <RangeLine
          :key="key_02"
          :show-line-type="2"
          :groups="groups"
          :grid="grid"
          :colors="fifthColor.toReversed()"
          :y-axis-split-line="yAxisSplitLine"
          :y-value-increment="0"
          :y-min="-0.1"
          :y-max="9.1"
          :y-axis-axis-label-formatter="formatter"
        />
      </template>
      <template v-else-if="activeName === 'group bar line'">
        <GroupBarLine :key="key_03" :groups="groups"></GroupBarLine>
      </template>
      <template v-else-if="activeName === 'number distribution'">
        <NumberDistribution
          :groups="groups"
          :row-size="5"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { FIVE_ASCENDING_GROUPS, fifthColor } from '@/utils/study.js'
import { yAxisSplitLine, formatter } from '@/views/five/tools.js'
import DateLineViewMixin from '@/mixins/DateLineViewMixin.js'

import RangeLine from '@/components/RangeLine/index.vue'

export default {
  name: 'HongkongRangeFiveAscending',
  components: {
    RangeLine
  },
  mixins: [DateLineViewMixin],
  data() {
    return {
      groups: FIVE_ASCENDING_GROUPS,
      fifthColor,
      grid: {
        borderWidth: 0, // 确保没有边框
        show: true,
        left: 55,
        right: 0,
        top: 8,
        bottom: 110
      },
      yAxisSplitLine
    }
  },
  methods: {
    formatter: formatter(FIVE_ASCENDING_GROUPS)
  }
}
</script>
